<template lang="pug">
.survey(v-loading="loading")
  .survey-header
    img.header-logo(src="../../static/images/ja_logo.png")
    .survey-header-title 杰恩设计 | 供应商入库系统
  .survey-container
    .survey-steps
      .steps-item(
          v-for="item, index in steps"
          :key="index"
          :class="{'active': stepActive == item.value, 'steps-item-line': index !== steps.length - 1}"
        )
        .steps-item-label {{item.title}}
        .steps-item-inner {{index + 1}}
    .survey-content(v-if="stepActive === 'survey'")
      survey-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
    .survey-content(v-if="stepActive === 'sales'")
      sales-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
    .survey-content(v-if="stepActive === 'yield'")
      yield-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
    .survey-content(v-if="stepActive === 'quality'")
      quality-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
    .survey-content(v-if="stepActive === 'safe'")
      safe-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
    .survey-content(v-if="stepActive === 'certificate'")
      certificate-module(:dropDwon="dropDwon" :parentForm="form" @change="changeForm")
  el-dialog(
    :visible.sync="successVisible"
    width="650px"
    @close="handleCloseVisible"
  )
    .dialog-body
      img(src="../../static/images/survey.png")
</template>

<script>
import surveyModule from './components/surveyModule'
import salesModule from './components/salesModule'
import yieldModule from './components/yieldModule'
import qualityModule from './components/qualityModule'
import safeModule from './components/safeModule'
import certificateModule from './components/certificateModule'

import { getDropDownList, createSupplierStoragePage } from 'api'
export default {
  name: 'Survey',
  components: {
    surveyModule,
    salesModule,
    yieldModule,
    qualityModule,
    safeModule,
    certificateModule
  },
  data () {
    return {
      successVisible: false,
      loading: false,
      steps: [
        {
          title: '供应商（制造商）概况',
          value: 'survey'
        },
        {
          title: '供应商产品销售概况',
          value: 'sales'
        },
        {
          title: '供应商生产概况',
          value: 'yield'
        },
        {
          title: '质量保证能力',
          value: 'quality'
        },
        {
          title: '环境保护、社会责任、职业健康与安全体系',
          value: 'safe'
        },
        {
          title: '相关证书资料',
          value: 'certificate'
        }
      ],
      stepActive: 'survey',
      dropDwon: {
        certificationList: [],
        companyTypeList: [],
        fileCompletedList: [],
        generalTaxpayerList: [],
        inDepartmentList: [],
        needBillingList: [],
        productPositioningList: [],
        researchProductivityList: []
      },
      form: {}
    }
  },
  methods: {
    async getDropDownList () {
      try {
        const { ResultSet } = await this.$axios.post(getDropDownList)
        this.dropDwon = ResultSet.userData
      } catch(err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeForm ({ form, nextRouter }) {
      if (nextRouter === 'submit') {
        this.form = { ...this.form, ...form }
        this.submit()
      } else {
        this.stepActive = nextRouter
        this.form = { ...this.form, ...form }
      }
    },
    async submit () {
      try {
        let query = { ...this.form }
        if (query.productPositioning) query.productPositioning = query.productPositioning.join(',')
        this.loading = true
        await this.$axios.post(createSupplierStoragePage, { axiosType: 'upload', ...query })
        this.loading = false
        this.successVisible = true
        this.$message.success('提交成功，请等待工作人员审核！')
      } catch (err) {
        this.loading = false
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    handleCloseVisible () {
      this.$router.go(0)
      this.successVisible = false
    },
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.getDropDownList()
    })
  }
}
</script>

<style lang="scss" scoped>
.survey {
  width: 100%;
  background: #FAFAFE;
}
.survey-container {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.survey-header {
  padding: 108px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .header-logo {
    width: 107px;
  }
  .survey-header-title {
    margin-left: 10px;
    font-size: 36px;
    color: #000;
    margin-bottom: 5px;
  }
}
.survey-steps {
  position: fixed;
  width: 210px;
}
.steps-item {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 65px;
  &.steps-item-line {
    &:after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      right: 15px;
      top: 24px;
      background: #BBBBBB;
    }
  }
  &.active {
    .steps-item-label {
      font-size: 16px;
      font-weight: 700;
      color: #353535;
    }
    .steps-item-inner {
      
      width: 30px;
      min-width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #D7000F;
      color: #D7000F;
      font-size: 16px;
    }
  }
  .steps-item-label {
    width: 165px;
    min-width: 165px;
    text-align: right;
    padding-top: 3px;
    font-size: 14px;
    color: #999;
    line-height: 18px;
    cursor: pointer;
  }
  .steps-item-inner {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    margin-left: 13px;
    z-index: 1;
    background: #FAFAFE;
  }
}
.survey-content {
  flex: 1;
  padding-left: 230px;
}
</style>

<style lang="scss">
.survey {
  .el-input__inner {
    &:focus {
      border-color: #D7000F;
    }
  }
  .el-form-item__error {
    color: #D7000F;
  }
}
</style>